diff options
| author | secondl1ght <[email protected]> | 2022-09-17 11:13:10 -0600 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-09-24 09:05:08 -0700 |
| commit | 9e749509227cf19dd49cb84ce3239d5dd1d9579a (patch) | |
| tree | 40b4419a2f81ca7a00b0169d88164c9293c8190b /src/routes/[username]/settings | |
| parent | d12525469342ccb65473d6fdb4d617f347835075 (diff) | |
| download | coinos-ui-9e749509227cf19dd49cb84ce3239d5dd1d9579a.tar.gz coinos-ui-9e749509227cf19dd49cb84ce3239d5dd1d9579a.zip | |
add hover states to links and buttons
Diffstat (limited to 'src/routes/[username]/settings')
| -rw-r--r-- | src/routes/[username]/settings/+page.svelte | 6 | ||||
| -rw-r--r-- | src/routes/[username]/settings/_account.svelte | 32 |
2 files changed, 26 insertions, 12 deletions
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte index 4821d50a..e3acc93c 100644 --- a/src/routes/[username]/settings/+page.svelte +++ b/src/routes/[username]/settings/+page.svelte @@ -45,8 +45,10 @@ <div class="font-bold flex justify-between items-center border-b pb-3 text-secondary"> {#each tabs as { name, key }} - <button class:text-black={tab === name} on:click|preventDefault={() => (tab = name)} - >{$t(`user.settings.${key}`)}</button + <button + class="hover:opacity-80" + class:text-black={tab === name} + on:click|preventDefault={() => (tab = name)}>{$t(`user.settings.${key}`)}</button > {/each} </div> diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte index 8b9eeec5..dbaea87e 100644 --- a/src/routes/[username]/settings/_account.svelte +++ b/src/routes/[username]/settings/_account.svelte @@ -124,14 +124,20 @@ <span class="font-bold">{$t('user.settings.profileImage')}</span> <div class="flex"> {#if profile} - <div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto"> + <div + class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer" + on:click={() => select('profile')} + > <img src={profile} class="absolute w-full h-full object-cover object-center visible overflow-hidden" /> </div> {:else if $user.profile} - <div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto"> + <div + class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer" + on:click={() => select('profile')} + > <img src={`/api/public/${$user.username}-profile.png`} class="absolute w-full h-full object-cover object-center visible overflow-hidden" @@ -139,7 +145,8 @@ </div> {:else} <div - class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto" + class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer" + on:click={() => select('profile')} > <Icon icon="logo-symbol-white" style="mx-auto" /> </div> @@ -148,7 +155,7 @@ <!-- found missing translation --> <button type="button" - class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" + class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80" on:click={() => select('profile')}>Select</button > <input @@ -169,17 +176,22 @@ <span class="font-bold">{$t('user.settings.bannerImage')}</span> </div> <!-- found missing translation --> - <p class="text-secondary mb-4">Recommended size: 1920x175px</p> + {#if banner} - <img src={banner} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" /> + <img + src={banner} + class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80" + on:click={() => select('banner')} + /> {:else if $user.banner} <img src={`/api/public/${$user.username}-banner.png`} - class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" + class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80" + on:click={() => select('banner')} /> {:else} <div - class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer" + class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80" on:click={() => select('banner')} /> {/if} @@ -187,7 +199,7 @@ <!-- found missing translation --> <button type="button" - class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary" + class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80" on:click={() => select('banner')}>Select</button > <input @@ -207,7 +219,7 @@ {#each colorThemes as colors} <button type="button" - class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme === + class="hover:opacity-80 mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme === colors.theme ? 'border-black' : ''}" |